<template>
	<view class="body">
		<view class="title">
			<text>车辆违章查询结果</text>
		</view>
		<view class="" v-if="resultInfo.records">
			<view class="content">
				<view class="info">
					<text class="info-number">
						{{resultInfo.conut}}
					</text>
					<text class="info-title">
						未处理
					</text>
				</view>
			</view>
			<view class="info-card" v-for="(item,index) in resultInfo.records" :key="index">
				<view class="card-header">
					<view class="card-title">
						罚款:{{item.money}}
						<text style="color: red;">4</text>
					</view>
					<view class="card-title">
						扣分:{{item.degree}}
						<text style="color: red;">200</text>
					</view>
					<view class="card-title">
						<text style="font-size: 24rpx;">2021-09-02 16:06:06</text>
					</view>
				</view>
				<view class="card-body">
					<view class="card-title">
						违规地点 : <text>{{item.address}}</text>
					</view>
					<view class="card-title" style="margin-top: 20rpx;">
						原因 : <text>{{item.reason}}</text>
					</view>
				</view>
			</view>
		</view>
		<view v-if="resultInfo.data.errorMsg">
			<view class="info-card">
				<text style="text-align: center;">{{resultInfo.data.errorMsg  }}</text>
			</view>
		</view>
		<view v-else>
			<view class="info-card">
				<text style="text-align: center;">{{resultInfo.message }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				result:{},
				resultInfo:{}
			}
		},
		onLoad(options) {
			this.result = options.data
			console.log(this.result)
		},
		onShow() {
			this.initResult()
		},
		methods:{
			initResult(){
				let data = JSON.parse(this.result)
				this.resultInfo = data
				console.log(this.resultInfo)
			}
		}
	}
</script>

<style >
	page {
		background-color: #FFFFFF;
	}
	.card-body{
		padding: 0 36rpx;
		margin-top: -40rpx;
	}
	.card-title{
		font-size: 32rpx;
	}
	.title{
		width: 80%;
		margin: 0 auto;
		text-align: center;
		font-size: 36rpx;
		color: #6b6866;
		margin-top: 20rpx;
	}
	.content{
		padding: 20rpx;
		width: 80%;
		margin: 40rpx auto;
		display: flex;
		justify-content: space-between;
	}
	.info{
		width: 100rpx;
		height: 80rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.info:nth-child(2){
		width: 200rpx;
		height: 80rpx;
		border-left: 4rpx solid #efefef;
		border-right: 4rpx solid #efefef;
		
	}
	.info-number{
		font-size: 46rpx;
		color: #66686b;
	}
	.info-title{
		color: #66686b;
	}
	.info-card{
		width: 670rpx;
		height: 268rpx;
		margin: 0 auto;
		background-color: #f3f7fa;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	.card-header{
		display: flex;
		justify-content: space-around;
		padding: 36rpx 0;
	}
</style>
